<template>
  <div v-for="(row,index)  in sortWithValue" :key="row.key"
       :class="getPieceClass(row)">
    <template v-if="row.type == 'boolean'">
      <label v-if="row.value">{{ row.key }}</label>
      <del v-else style="text-decoration: line-through; text-decoration-style: double;">{{ row.key }}
      </del>
    </template>
    <template v-else-if="row.type == 'tag'">
      <label>{{ row.key }}</label>
      <el-tag v-for="(item) in row.value" :key="item">{{ item }}</el-tag>
    </template>
    <template v-else>
      <label>{{ row.key }}</label>
      <label>{{ row.value }}</label>
    </template>
  </div>
</template>

<script setup>
defineOptions({
  name: "json-items",
  inheritAttrs: true,
});

const $props = defineProps({
  sort: {type: String, default: ""},
  hiddenIf: {
    type: Map, default() {
      return {};
    }
  },
});

const $model = defineModel({type: Object});


let sortWithValue = $computed(() => {
  var entries = $model.value;
  if (!entries) return [];

  // var entries = Object.entries(this.$model).map(it => {
  //   return {key: it[0], value: it[1]}
  // });

  var ps = $props.sort.split(",").filter(it => it);
  var firstKeys = ps.filter(it => !it.startsWith("-"));

  if (firstKeys.includes("id")) {
    firstKeys.push("id");
  }
  if (firstKeys.includes("name")) {
    firstKeys.push("name");
  }
  if (firstKeys.includes("code")) {
    firstKeys.push("code");
  }


  var lastKeys = ps.filter(it => it.startsWith("-"));

  var firstTypes = ["boolean", "number", "string"]


  entries = entries
      .filter(it => {
        var v = $props.hiddenIf [it.key];
        if (v === "*") {
          return false;
        }

        if (v === it.value) {
          return false;
        }

        v = $props.hiddenIf["*"];
        if (v === it.value) {
          return false;
        }

        return true;
      });

  entries.sort((a, b) => {

    for (let firstKey of firstKeys) {
      if (a.key == firstKey && b.key != firstKey) {
        return -1;
      }

      if (a.key != firstKey && b.key == firstKey) {
        return 1;
      }

      if (a.key == firstKey && b.key == firstKey) {
        return 0;
      }
    }


    for (let lastKey of lastKeys) {
      if (a.key == lastKey && b.key != lastKey) {
        return 1;
      }

      if (a.key != lastKey && b.key == lastKey) {
        return -1;
      }

      if (a.key == lastKey && b.key == lastKey) {
        return 0;
      }
    }


    var av = a.value, bv = b.value;
    if (!av) {
      return -1;
    }

    if (!bv) {
      return 1;
    }


    var aType = av.getJsType();
    var bType = bv.getJsType();

    for (const firstType of firstTypes) {
      if (aType == firstType && bType != firstType) {
        return -1;
      }
      if (aType != firstType && bType == firstType) {
        return 1;
      }


      if (aType == "string" && bType == "string") {
        return av.length - bv.length;
      }

      if (aType == firstType && bType == firstType) {
        return 0;
      }
    }


    if (aType.isObjectType(aType) && !bType.isObjectType(bType)) {
      return -1;
    }

    if (!aType.isObjectType(aType) && bType.isObjectType(bType)) {
      return 1;
    }


    if (aType.isArrayType(aType) && !bType.isArrayType(bType)) {
      return -1;
    }

    if (!aType.isArrayType(aType) && bType.isArrayType(bType)) {
      return 1;
    }

    console.error(aType + ":" + bType);
    return 0;
  })

  return entries
});


const getPieceClass = (row) => {
  const ret = [];
  if (row.key == '_id' || row.key == 'id' || row.key == 'name' || (row.type == 'boolean' && row.value)) {
    ret.push('strong');
  }

  ret.push("piece");
  ret.push(row.key);

  if (row.value && row.value.toCharArray && row.value.toCharArray().filter(it => it == "\n").length > 4) {
    ret.push("flex-column")
  }
  return ret;
}
</script>


<style scoped lang="scss">

</style>